<template>
	<div>
		<div>这是交易造数工厂</div>
		<div class="app-container">
			<el-card>
				<div class="mb15">
					<el-input v-model="state.listQuery.name" placeholder="请输入场景名称" style="max-width: 180px"></el-input>
					<el-button type="primary" class="ml10" @click="search">查询 </el-button>
					<el-button type="success" class="ml10" @click="onOpenSaveOrUpdate('save', null)">新增 </el-button>
				</div>
				<z-table
					:columns="state.columns"
					ref="tableRef"
					:data="state.listData"
					v-model:page-size="state.listQuery.pageSize"
					v-model:page="state.listQuery.page"
					:total="state.total"
					@pagination-change="getList"
				>
				</z-table>
			</el-card>
			<Edit ref="EditRef" @getList="getList" />
		</div>
	</div>
</template>

<script setup>
import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { dfApi } from '/@/api/dataFactory/df';
import {useRouter} from "vue-router";

// 引入组件
const Edit = defineAsyncComponent(() => import('../FactoryEditProject.vue'));
const router = useRouter()

// 自定义数据
const tableRef = ref();
const EditRef = ref();
const state = reactive({
	columns: [
		{ label: '序号', columnType: 'index', align: 'center', width: 'auto', show: true },
		{
			key: 'sence_name',
			label: '场景名称',
			align: 'center',
			width: '',
			show: true,
			render: ({ row }) =>
				h(
					ElButton,
					{
						link: true,
						type: 'primary',
						onClick: () => {
							toDetailsPage('update', row);
						},
					},
					() => row.sence_name
				),
		},
		{ key: 'req_url', label: '请求地址', align: 'center', width: '180', show: true },
		{ key: 'created_by', label: '负责人', align: 'center', width: '', show: true },
		{ key: 'updation_date', label: '更新时间', align: 'center', width: '150', show: true },
		// {key: 'updated_by_name', label: '更新人', align: 'center', width: '', show: true},
		// {key: 'creation_date', label: '创建时间', align: 'center', width: '150', show: true},
		// {key: 'created_by_name', label: '创建人', align: 'center', width: '', show: true},
		{
			label: '操作',
			fixed: 'right',
			width: '140',
			align: 'center',
			render: ({ row }) =>
				h('div', null, [
					h(
						ElButton,
						{
							type: 'primary',
							onClick: () => {
								onOpenSaveOrUpdate('update', row);
							},
						},
						() => '编辑'
					),

					h(
						ElButton,
						{
							type: 'danger',
							onClick: () => {
								deleted(row);
							},
						},
						() => '删除'
					),
				]),
		},
	],
	listData: [],
	total: 0,
	listQuery: {
		page: 1,
		pageSize: 20,
		api_org_id: 1,
		sort_type: '1',
	},
});

// 进入详情页，需传入对应场景id，用于渲染场景详情
const toDetailsPage = () => {
	// 路由跳转
	// router.push('/dataFactory/details');
	// name 跳转
	router.push({name:'detailDataFactory'});
};

// 初始化表格数据
const getList = () => {
	tableRef.value.openLoading();
	dfApi()
		.getList(state.listQuery)
		.then((res) => {
			state.listData = res.data.rows;
			state.total = res.data.rowTotal;
			tableRef.value.closeLoading();
		})
		.finally(() => {
			tableRef.value.closeLoading();
		});
};
// 查询
const search = () => {
	state.listQuery.page = 1;
	getList();
};

// 新增或修改角色
const onOpenSaveOrUpdate = (editType, row) => {
	EditRef.value.openDialog(editType, row);
};

// 删除角色
const deleted = (row) => {
	ElMessageBox.confirm('是否删除该条数据, 是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			useProjectApi()
				.deleted({ id: row.id })
				.then(() => {
					ElMessage.success('删除成功');
					getList();
				});
		})
		.catch(() => {});
};
// 页面加载时
onMounted(() => {
	getList();
});
</script>

<style scoped lang="scss"></style>